<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>editTrain</title>
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/back/css/button.css">
<link href="css/" rel="stylesheet" type="text/css" />
<style type="text/css">
h2 {
	text-align: center;
}
a{
text-decoration: none;

}

body {
	font-family: "幼圆";
}

.center {
	width: 800px;
	height: 730px;
	margin-left: auto;
	margin-right: auto;
}

.foot {
	width: 800px;
	height: 20px;
	margin-left: 1010px;
	margin-top: 40px;
}

table {
	border-collapse: collapse;
	width: 1189px;
	text-align: center;
	margin-left: -189px;
	font-family: "幼圆";
}

tr {
	font-family: "幼圆";
	height: 45px;
}

.bankuai {
	width: 80px;
	border: 0px;
	background-color: transparent;
	text-align: center;
}

.bankuai1 {
	width: 50px;
	border: 0px;
	background-color: transparent;
	text-align: center;
}

#bg {
	display: none;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 120%;
	height: 120%;
	background-color: black;
	z-index: 1001;
	-moz-opacity: 0.7;
	opacity: .70;
	filter: alpha(opacity = 70);
}

#edit {
	font-family: "幼圆";
	line-height: 40px;
	display: none;
	position: absolute;
	top: 25%;
	left: 40%;
	width: 20%;
	height: 63%;
	padding: 8px;
	border: 8px solid #E8E9F7;
	background-color: white;
	z-index: 1002;
	overflow: auto;
}

.tit {
	width: 175px;
	margin-left: 40px;
	margin-top: 6px;
}

.button.blue {
	width: 70px;
	margin-top: 10px;
	margin-left: 3px;
	margin-right: 3px;
	height: 26px;
	margin-bottom: 8px;
}

font {
	position: relative;
	top: -6px;
}

#testButton, .testButton {
	margin-left: 30px;
	color: rgb(235, 241, 245);
	font-size: 13px;
	height: 30px;
	padding-top: 5px;
	padding-bottom: 9px;
	padding-left: 25px;
	padding-right: 25px;
	border-width: 1px solid #ffffff;
	border-radius: 6px;
	background-color: rgb(0, 133, 194);
}

#testButton:hover {
	color: #ffffff;
	background-color: #009bc2;
	border-color: #e4eded;
}

.testButton:hover {
	color: #ffffff;
	background-color: #009bc2;
	border-color: #e4eded;
}

th, td {
	padding: 6px 0;
	text-align: center;
}

th {
	background-color: #007D28;
	color: #ffffff;
}

tr {
	background-color: #E8FFE8;
}

.odd {
	background-color: #FFF3EE;
}

.highlight {
	background-color: #E0E0E0;
}
</style>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/back/js/jquery-2.1.1.min.js"></script>
<script>
	$(function() {
			$("#name").blur(function(){
				var name=$("#name").val();
				if(name==""){
					$("#massg").html("列车编号不能为空");
					$("#testButton").attr("disabled", true); 
				}else{
					$("#massg").html("");
					$("#testButton").attr("disabled", false); 
				}
			});
			$("#type").blur(function(){
				var type=$("#type").val();
				if(type==""){
					$("#massg").html("列车类型不能为空");
					$("#testButton").attr("disabled", true); 
				}else{
					$("#massg").html("");
					$("#testButton").attr("disabled", false); 
				}
			});
			$("#start").blur(function(){
				var start=$("#start").val();
				if(start==""){
					$("#massg").html("始发站不能为空");
					$("#testButton").attr("disabled", true); 
				}else{
					$("#massg").html("");
					$("#testButton").attr("disabled", false); 
				}
			});
			$("#actime").blur(function(){
				var actime=$("#actime").val();
				if(actime==""){
					$("#massg").html("始发时间不能为空");
					$("#testButton").attr("disabled", true); 
				}else{
					$("#massg").html("");
					$("#testButton").attr("disabled", false); 
				}
			});
			$("#overstat").blur(function(){
				var overstat=$("#overstat").val();
				if(overstat==""){
					$("#massg").html("终点站不能为空");
					$("#testButton").attr("disabled", true); 
				}else{
					$("#massg").html("");
					$("#testButton").attr("disabled", false); 
				}
			});
			$("#overtime").blur(function(){
				var overtime=$("#overtime").val();
				if(overtime==""){
					$("#massg").html("终点时间不能为空");
					$("#testButton").attr("disabled", true); 
				}else{
					$("#massg").html("");
					$("#testButton").attr("disabled", false); 
				}
			});
			$("#price").blur(function(){
				var price=$("#price").val();
				if(price==""){
					$("#massg").html("车票价格不能为空");
					$("#testButton").attr("disabled", true); 
				}else{
					$("#massg").html("");
					$("#testButton").attr("disabled", false); 
				}
			});
			$("#num").blur(function(){
				var num=$("#num").val();
				if(num==""){
					$("#massg").html("车票数量不能为空");
					$("#testButton").attr("disabled", true); 
				}else{
					$("#massg").html("");
					$("#testButton").attr("disabled", false); 
				}
			});
			$("#testButton").click(function(){
				$("#myform").submit();
			});
		$("tr:even").css("background-Color", "lightblue");
		$(".btn").click(function() {
			$("#bg").show();
			$("#edit").show();
		})
		$("#exit").click(function() {
			$("#bg").hide();
			$("#edit").hide();
		})

		$(".bankuai1,.bankuai").dblclick(function() {
			$(this).attr("readOnly", false);
		});
		$(".bankuai1,.bankuai").change(
				function() {
					var flag = window.confirm("您确定要修改该信息吗?");
					if (flag) {

						var num = $(this).parent().parent().children().find(
								":input").val();
						var cname = $(this).parent().parent().children().next()
								.find(":input").val();
						var ctype = $(this).parent().parent().children().next()
								.next().find(":input").val();
						var actname = $(this).parent().parent().children()
								.next().next().next().find(":input").val();
						var acttime = $(this).parent().parent().children()
								.next().next().next().next().find(":input")
								.val();
						var overname = $(this).parent().parent().children()
								.next().next().next().next().next().find(
										":input").val();
						var overtime = $(this).parent().parent().children()
								.next().next().next().next().next().next()
								.find(":input").val();
						var price = $(this).parent().parent().children().next()
								.next().next().next().next().next().next()
								.find(":input").val();
						var pcount = $(this).parent().parent().children()
								.next().next().next().next().next().next()
								.next().next().find(":input").val();
						var carid = $(this).parent().parent().children().next()
								.next().next().next().next().next().next()
								.next().next().find(":input").val();

						$.ajax({
							type : "POST",
							url : "/EditTrainEditServlet",
							data : {
								/* 			        	 "uid":num,"cname":cname,"ctype":ctype,"acttime":acttime,"actname":actname,"overtime":overtime,"overname":overname,"price":price,"pcount":pcount,"carid":carid 
								 */

								"uid" : num,
								"cname" : cname,
								"ctype" : ctype,
								"acttime" : acttime,
								"actname" : actname,
								"overtime" : overtime,
								"overname" : overname,
								"price" : price,
								"pcount" : pcount,
								"carid" : carid

							},
							dataType : "json",
							success : function(data) {
								if (data == 1) {
									alert("修改成功")
								} else {
									alert("修改失败")
								}
							},
							error : function() {
								alert(2)
							}
						})

					} else {
						alert("取消修改");
					}
				})
	})

	//动态给js添加class属性
	function addClass(element, value) {
		if (!element.className) {
			element.className = value; //如果element本身不存在class,则直接添加class为value的值
		} else {
			element.className += " " + value; //如果element之前有一个class值，注意中间要多一个空格,然后再加上value的值
		}
	}

	//隔行换色
	function stripeTable() {
		var tables = document.getElementsByTagName("table"); //遍历文档中的所有table
		for (var i = 0; i < tables.length; i++) {
			var rows = document.getElementsByTagName("tr");
			for (var j = 0; j < rows.length; j++) {
				if (j % 2 == 0) {
					addClass(rows[j], "odd"); //如是偶数行，则添加class为odd的属性
					//rows[j].setAttribute("class", "odd");
				}
			}
		}
	}

	//鼠标经过时高亮显示
	function highlightRows() {
		var rows = document.getElementsByTagName("tr");
		for (var i = 0; i < rows.length; i++) {
			rows[i].oldClassName = rows[i].className; //首先保存之前的class值
			rows[i].onmouseover = function() {
				addClass(this, "highlight"); //鼠标经过时添加class为highlight的值
			}
			rows[i].onmouseout = function() {
				this.className = this.oldClassName; //鼠标离开时还原之前的class值
			}
		}
	}

	window.onload = function() {
		stripeTable();
		highlightRows();
	}
</script>
</head>
<body>
	<h2>列车信息编辑</h2>
	<div class="content">
		<div class="center">
			<table border="1px" style="margin-top: 20px;">
				<tr>
					<th>编号</th>
					<th>列车名称</th>
					<th>列车类型</th>
					<th>始发站</th>
					<th>始发时间</th>
					<th>终点站</th>
					<th>到站时间</th>
					<th>车票价格</th>
					<th>车票总数</th>
					<th>列車編號</th>
					<th>操作</th>
				</tr>
				<c:forEach items="${list }" var="u">
					<tr>
						<td><input class="bankuai1" readOnly type="text"
							value="${u.cpid }"></td>
						<td><input class="bankuai1" readOnly type="text"
							value="${u.cartable.crname }"></td>
						<td><input class="bankuai" readOnly type="text"
							value="${u.cartable.ctype }"></td>
						<td><input class="bankuai1" readOnly type="text"
							value="${u.goname }"></td>
						<td><input class="bankuai" readOnly type="text"
							value="${u.gotime }"></td>
						<td><input class="bankuai1" readOnly type="text"
							value="${u.overname }"></td>
						<td><input class="bankuai" readOnly type="text"
							value="${u.overtime }"></td>
						<td><input class="bankuai1" readOnly type="text"
							value="${u.jienjia }"></td>
						<td><input class="bankuai1" readOnly type="text"
							value="${u.pnum }"></td>
						<td><input class="bankuai1" readOnly type="text"
							value="${u.cartable.carid }"></td>
						<td><button onclick="xiugai(this)" class="btn button blue">
								<font>修改</font>
							</button>||<a
							href="${pageContext.request.contextPath }/EditTrainDelServlet?id=${u.cpid}"
							onclick="return queren()"><button class="button blue">
									<font>删除</font>
								</button></a></td>
					</tr>
					

				</c:forEach>
				<tr>
						<td colspan="13" style="text-align: center;"><span>第${pageIndex }页
								--共${totalPage }页</span> <a
							href="${pageContext.request.contextPath }/EditTrainServlet?pageIndex=1">首页</a>||
							<a
							href="${pageContext.request.contextPath }/EditTrainServlet?pageIndex=${pageIndex-1}">上一页</a>||
							<a
							href="${pageContext.request.contextPath }/EditTrainServlet?pageIndex=${pageIndex+1}">下一页</a>||
							<a
							href="${pageContext.request.contextPath }/EditTrainServlet?pageIndex=${totalPage}">尾页</a>
						</td>
					</tr>
			</table>
		</div>
	</div>

	<%-- 	<div class="foot">
		<span>第${pageIndex }页  --共${totalPage }页</span>
		<a href="${pageContext.request.contextPath }/EditTrainServlet?pageIndex=1">首页</a>||
		<a href="${pageContext.request.contextPath }/EditTrainServlet?pageIndex=${pageIndex-1}">上一页</a>||
		<a href="${pageContext.request.contextPath }/EditTrainServlet?pageIndex=${pageIndex+1}">下一页</a>||
		<a href="${pageContext.request.contextPath }/EditTrainServlet?pageIndex=${totalPage}">尾页</a>
	</div> --%>
	<div id="bg"></div>
	<div id="edit">
		<h3>请输入更新的内容</h3>
		<div id="massg" style="color: red"></div>
		<form id="myform"
			action="${pageContext.request.contextPath }/EditTrainEditServlet?flag=1"
			method="post">
			<input type="hidden" name="uid"> <input type="hidden"name="carid"> 
			<span class="tit">列车名称：</span> <input	type="text" id="name" name="cname"><br>
			<span class="tit">列车类型：</span> <input type="text" id="type" name="ctype"><br> 
			<span class="tit">始	发 站：</span> <input type="text" id="start" name="actname"><br> 
			<span class="tit">始发时间：</span> <input type="text" id="actime" name="acttime"><br>
			<span class="tit">终 点 站：</span> <input type="text" id="overstat" name="overname"><br>
			<span class="tit">终点时间：</span> <input type="text" id="overtime" name="overtime"><br>
			<span class="tit">车票价格：</span> <input type="text" id="price" name="price"><br>
			<span class="tit">车票总数：</span> <input type="text" id="num" name="pcount"><br>
			<input type="button" id="testButton"  value="提交"><input
				class="testButton" type="button" id="exit" value="取消">
		</form>
	</div>

</body>
</html>
<script>
	function queren() {
		if (confirm("确认删除？")) {
			return true;
		} else {
			return false;
		}
	}

	function xiugai(oop) {

		var num = $(oop).parent().prev().prev().prev().prev().prev().prev()
				.prev().prev().prev().prev().find(":input").val();
		$(":input[name='uid']").val(num);
		var cname = $(oop).parent().prev().prev().prev().prev().prev().prev()
				.prev().prev().prev().find(":input").val();
		$(":input[name='cname']").val(cname);
		var ctype = $(oop).parent().prev().prev().prev().prev().prev().prev()
				.prev().prev().find(":input").val();
		$(":input[name='ctype']").val(ctype);

		var actname = $(oop).parent().prev().prev().prev().prev().prev().prev()
				.prev().find(":input").val();
		$(":input[name='actname']").val(actname);

		var acttime = $(oop).parent().prev().prev().prev().prev().prev().prev()
				.find(":input").val();
		$(":input[name='acttime']").val(acttime);

		var overname = $(oop).parent().prev().prev().prev().prev().prev().find(
				":input").val();
		$(":input[name='overname']").val(overname);

		var overtime = $(oop).parent().prev().prev().prev().prev().find(
				":input").val();
		$(":input[name='overtime']").val(overtime);

		var price = $(oop).parent().prev().prev().prev().find(":input").val();
		$(":input[name='price']").val(price);
		var pcount = $(oop).parent().prev().prev().find(":input").val();
		$(":input[name='pcount']").val(pcount);
		var carid = $(oop).parent().prev().find(":input").val();
		$(":input[name='carid']").val(carid);

	}
</script>
